/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 15:57:40
 * @LastEditTime: 2022-05-06 22:56:01
 * @LastEditors: wangjq4214
 */
import { Space, Grid } from '@arco-design/web-react';
import Overview from './components/overview';
import StoragePie from './components/storagePie';
import NodeBar from './components/nodeBar';
import { nodeDataAtom, storageDataAtom } from './model';

const { Row, Col } = Grid;

const Dashboard = () => {
  const refetchNodeStatus = useSetAtom(nodeDataAtom);
  const refetchStorageStatus = useSetAtom(storageDataAtom);

  useEffect(() => {
    refetchNodeStatus();
    refetchStorageStatus();
    const timer = setInterval(() => {
      refetchNodeStatus();
      refetchStorageStatus();
    }, 3000);

    return () => {
      clearInterval(timer);
    };
  });

  return (
    <div className="w-full flex">
      <Space size={16} direction="vertical" className="w-full">
        <Overview />

        <Row gutter={24}>
          <Col span={12}>
            <StoragePie />
          </Col>
          <Col span={12}>
            <NodeBar />
          </Col>
        </Row>
      </Space>
    </div>
  );
};

export default Dashboard;
